<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-text">
      <dropdown-normal label="绑定动态字段" :valLists="COMPONENT_TEXT_DATAKEYS" v-model="commonAttr.dataKey" @change="onChangeAttr"></dropdown-normal>
      <template v-if="commonAttr.dataKey == 'user-name'">
        <input-normal label="前缀" v-model="commonAttr.namePrefix" @change="onChangeAttr"></input-normal>
        <input-normal label="后缀" v-model="commonAttr.nameSuffix" @change="onChangeAttr"></input-normal>
      </template>
      <input-normal label="显示文字数量" v-model="commonAttr.nameNum" @change="onChangeAttr"></input-normal>
      <textarea-normal label="文字" v-model="commonAttr.text" @change="onChangeAttr"></textarea-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.letterSpacing" label="字距" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
      <textarea-normal label="提示内容" v-model="commonAttr.placeholder" @change="onChangeAttr"></textarea-normal>
      <dropdown-normal v-model="commonAttr.placeholerColor" label="提示文本颜色" :valLists="PLACEHOLDER_COLOR_TYPE"  @change="onChangeAttr"></dropdown-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <switch-normal v-model="commonAttr.isHtml" label="复杂样式" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isRandom" label="随机" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isVertical" label="竖着" @change="onChangeAttr"></switch-normal>
      <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
      <el-divider content-position="center">高级属性</el-divider>
      <switch-normal v-model="commonAttr.isDynamic" label="动态文本" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isEdit" label="可编辑" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isEdit" >
        <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
        <switch-normal v-model="commonAttr.need" label="设为必填项" @change="onChangeAttr"></switch-normal>
        <switch-normal v-if="commonAttr.need" v-model="commonAttr.isShowNeed" label="显示必填项" @change="onChangeAttr"></switch-normal>
      </template>
      <switch-normal v-model="commonAttr.isDisplayY" label="显示Y轴滚动条" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isDisplayY" label="滚动条颜色" :valLists="SCROLLBER_TYPE" v-model="commonAttr.scrollbarType" @change="onChangeAttr"></dropdown-normal>
      <slider-normal v-model="commonAttr.limitTextNum" label="限制文本数量" :max="5000" :step="100" @change="onChangeAttr"></slider-normal>
      <switch-normal v-model="commonAttr.isSeparator" label="千位分隔符" @change="onChangeAttr"></switch-normal>
      <input-normal label="除数" v-model="commonAttr.divideNumber" placeholder="$total$/number" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.isPLable" label="p标签" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>



<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { COMPONENT_TEXT_DATAKEYS } from '@/const/web/'
import { PLACEHOLDER_COLOR_TYPE, SCROLLBER_TYPE } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>